<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            margin: 0;
        }
        .container{
            position: absolute;
            left: 20px;
            top: 20px;
            background: blue;
        }
        .box{
            width: 100px;
            height: 100px;
            margin: 50px;
            background: red;
            border: 5px solid;
        }
    </style>
</head>
<body>
    <!-- <div class="container"> -->
        <div class="box"></div>
    <!-- </div> -->
    
    <script>
        // 元素的偏移量
        // 一、offsetLeft  和  offsetTop
        // 1.元素没有定位  : 偏移量相对 浏览器的距离
        // var  boxEle = document.querySelector(".box");
        // console.log("左偏移：",boxEle.offsetLeft);
        // console.log("上偏移:",boxEle.offsetTop);

        // 2.元素有定位 : 元素的偏移量会相对他的父级偏移。
        // var  boxEle = document.querySelector(".box");
        // console.log("左偏移:",boxEle.offsetLeft);
        // console.log("上偏移：",boxEle.offsetTop);


        // 二、clientLeft 和 clientTop  （用的少）;
        // clientLeft 和 clientTop 获取 左边 和上边的 边框距离 
        // var boxEle = document.querySelector(".box");
        // console.log(boxEle.clientLeft);
        // console.log(boxEle.clientTop);




        /* 
        一、和元素相关的内容
            offsetWidth/offsetHeight : 自身宽高 + 内边距 + 边框
            clientWidth/clientHeight : 自身宽高 + 内边距
            offsetLeft / offsetTop
                1.没有定位 
                    相对浏览器的左边和上边的偏移量
                2.有定位 
                    相对于定位父级的左边和上边的偏移量
            clientLeft / clientTop : 左边 和上边的边框宽度。

        
        
        
        
        
        */



    </script>
</body>
</html>